<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>列表渲染-练习</title>
  <style></style>
</head>

<body>
  <div id="root"></div>

  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>

  <script type="text/babel">
    //数组 
    let frames = ["xxxxx", "react", "angular", 'xyz'];

    let vdom = <div>
      <h2>前端三大框架</h2>
      <ul>
        {
          //  [<li>xxxxx</li>, <li>react</li>, <li>angular</li>,<li>xyz</li>]
          frames.map((item, index) => {
            return <li key={index}>{item}</li>;
          })
        }
      </ul>
    </div>;

    //渲染
    ReactDOM.render(vdom, document.querySelector('#root'));
  </script>
</body>

</html>